<template>
  <el-card>
    <el-tabs v-model="activeName">
      <el-tab-pane label="听课评价" name="basic">
        <el-table ref="dragTable" :data="columns" row-key="columnId" :max-height="tableHeight">
          <el-table-column label="序号" type="index" min-width="10%" class-name="allowDrag" />
          <el-table-column label="课程类型" width="100" align="center" prop="type">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.supms_course_type" :value="scope.row.type" />
            </template>
          </el-table-column>
          <el-table-column label="评价项目" width="150" align="center" prop="item" />
          <el-table-column label="评价指标" width="900" align="left" prop="content" />
          <el-table-column label="分值" width="100" align="center" prop="score" />
          <el-table-column label="评价分数" width="90" align="center" prop="point">
            <template slot-scope="scope">
              <el-input
                :oninput ="`value=value.replace(/[^0-9.]/g,'');if(value>${scope.row.score})value=${scope.row.score};if(value<0)value=0`"
                v-model="scope.row.point"
                :maxlength="2"
                :style="{ width: '100%' }"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="remarks">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.remarks"
                type="textarea"
                :maxlength="45"
                clearable
                :style="{ width: '100%' }"
                show-word-limit
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-form label-width="100px">
      <el-form-item
        style="text-align: center; margin-left: -100px; margin-top: 10px"
      >
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="close()">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { getAttendItem, addAttendEval } from "@/api/course/attendItems";
import Sortable from 'sortablejs'

export default {
  name: "ToAttendEval",
  dicts: ["supms_course_type"],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 听课评价项表格数据
      columns: [],
      // 选中选项卡的 name
      activeName: "basic",
      // 表格的高度
      tableHeight: document.documentElement.scrollHeight - 245 + "px",
    };
  },
  created() {
    const attendId = this.$route.query && this.$route.query.attendId;
    const typeNum = this.$route.query && this.$route.query.typeNum;
    if (typeNum) {
      this.getList(typeNum, attendId);
    }
  },
  methods: {
    getList(typeNum, attendId) {
      this.loading = true;
      getAttendItem(typeNum).then((response) => {
        this.columns = response;
        for (let i = 0; i < this.columns.length; i++) {
          this.columns[i].attendId = attendId;
        }
        //console.log(this.columns);
        this.loading = false;
      });
    },

    /** 提交按钮 */
    submitForm() {
      const upForm = this.columns
      this.$modal
        .confirm('听课评价仅能提交一次，若确定提交将无法对评价结果进行修改！')
        .then(function () {
          return addAttendEval(upForm);
        })
        .then(() => {
          const obj = { path: "/businessCourse/attend" };
          this.$tab.closeAllPage().then(() => {
            this.$tab.openPage("课堂听课", "/businessCourse/attend");
          })
          this.$modal.msgSuccess("评价成功");
        })
        .catch((error) => {
          if (error.message == "操作失败") {
            this.$modal.alertError("请检查是否全部项目已评分再提交！");
          }
        });
    },
    /** 返回听课管理按钮 */
    close() {
      const obj = { path: "/businessCourse/attend" };
      this.$tab.closeOpenPage(obj);
    },
  },
  mounted() {
    const el = this.$refs.dragTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
    const sortable = Sortable.create(el, {
      handle: ".allowDrag",
      onEnd: (evt) => {
        const targetRow = this.columns.splice(evt.oldIndex, 1)[0];
        this.columns.splice(evt.newIndex, 0, targetRow);
        for (let index in this.columns) {
          this.columns[index].sort = parseInt(index) + 1;
        }
      },
    });
  },
};
</script>
